import React, { useRef, useState } from 'react'

export default function UploadArea({ onFiles }){
  const inputRef = useRef(null)
  const [hover, setHover] = useState(false)
  const [filesCount, setFilesCount] = useState(0)

  function handleFiles(e){
    const files = Array.from(e.target.files || [])
    setFilesCount(files.length)
    if (onFiles) onFiles(files)
    e.target.value = ''
  }

  function handleDrop(e){
    e.preventDefault()
    setHover(false)
    const files = Array.from(e.dataTransfer.files || [])
    setFilesCount(files.length)
    if (onFiles) onFiles(files)
  }

  return (
    <div>
      <div
        className="upload-area card"
        onDragOver={(e)=>{e.preventDefault(); setHover(true)}}
        onDragLeave={()=>setHover(false)}
        onDrop={handleDrop}
        style={{borderStyle: hover ? 'solid' : 'dashed', transition:'all .12s ease'}}
      >
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <div style={{width:48,height:48,borderRadius:8,background:'linear-gradient(90deg,#eef6ff,#effcff)',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,color:'#0b4bd6'}}>⇪</div>
          <div style={{display:'flex',flexDirection:'column'}}>
            <div style={{fontWeight:700}}>拖拽图片到此处或点击上传</div>
            <div className="hint">支持 jpg / png / bmp · 单次上传或批量（演示）</div>
            {filesCount>0 && <div className="hint" style={{marginTop:6}}>已选文件：{filesCount} 个</div>}
          </div>
        </div>
        <input ref={inputRef} type="file" style={{display:'none'}} multiple accept="image/*" onChange={handleFiles} />
        <div style={{marginTop:8,display:'flex',justifyContent:'flex-end'}}>
          <button className="btn ghost" onClick={()=>inputRef.current && inputRef.current.click()}>选择文件</button>
        </div>
      </div>
    </div>
  )
}